import React, {memo, useEffect, useState} from 'react'
import IconGlobal from "@/assets/svg/icon_global";
import IconMenu from "@/assets/svg/icon_menu";
import IconAvatar from "@/assets/svg/icon_avatar";
import {HeaderRightWrapper} from "@/components/app-header/c-cpns/header-right/style";

const AppHeaderRight = memo(() => {

    const [showPanel, setShowPanel] = useState(false)

    //在 React 中，useEffect 的返回值实际上是一个 清理函数（cleanup function）。这个清理函数会在以下情况下执行：
    // 组件卸载时：当组件从 DOM 中移除时，React 会调用该清理函数。
    // 下一次 effect 执行前：如果 useEffect 带有依赖项数组，并且依赖项发生变化，React 会在应用新的副作用之前调用上一次的清理函数。
    // 使用场景
    // 清理函数主要用于处理需要释放的资源或清除副作用的情况，例如：
    // 取消网络请求
    // 清除定时器
    // 移除事件监听器
    useEffect(() => {
        function windowHandleClick() {
            setShowPanel(false)
        }

        window.addEventListener('click', windowHandleClick, true)
        return () => {
            window.removeEventListener('click', windowHandleClick, true)
        }
    }, []);// 空依赖数组表示仅在组件挂载和卸载时执行

    function profileClickHandle() {
        setShowPanel(true)
    }

    return (
        <HeaderRightWrapper>
            <div className='btns'>
                <span className='btn'>登录</span>
                <span className='btn'>注册</span>
                <span className='btn'>
                    <IconGlobal/>
                </span>
            </div>
            <div className='profile' onClick={profileClickHandle}>
                <IconMenu/>
                <IconAvatar/>
                {showPanel && (
                    <div className='panel'>
                        <div className='top'>
                            <div className='item'>注册</div>
                            <div className='item'>登录</div>
                        </div>
                        <div className='bottom'>
                            <div className='item'>出租房源</div>
                            <div className='item'>开展体验</div>
                            <div className='item'>帮助</div>
                        </div>
                    </div>
                )}
            </div>


        </HeaderRightWrapper>
    )
})

export default AppHeaderRight